.flex {
  display: flex;
}

/* 继承 */
.flex-center {
  @extend .flex;
  align-items: center;
  justify-content: center;
}

/* 循环生成class */
$direction: center, left, right;

@each $dir in $direction {
  .items-#{$dir} {
    @extend .flex;
    align-items: #{$dir};
  }

  .content-#{$dir} {
    @extend .flex;
    justify-content: #{$dir};
  }
}


/** 混入
    区别于继承，mixin可以传参数
*/
@mixin border($color: pink) {
  // 默认值
  border: 22px solid $color;
}

.bigBorder {
  font-size: 20px;
  color: rgb(255, 0, 34);
  @include border;
}

/* dom属性
    <div pointer>
    </div>
*/
*[pointer] {
  cursor: pointer;

  &:hover {
    box-shadow: #ff00e0 20px 20px 5px 4px;
  }
}

*[shadow] {
  box-shadow: red 10px 3px 5px 0px;
}